<!DOCTYPE html>
<html>
    <title>This is a exercise</title>

    <head>
        <!-- 在 <head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
             可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。 -->


        <meta charset="utf-8" http-equiv="refresh" content="5">
        <!-- 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
             META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 
             charset后面跟编码格式 
             http-equiv="refresh"为自动刷新网页，content后面的数字是自动刷新的间隔时长 
            meta中的元数据通常成对出现，即名称（name）和值（content）-->
        <meta name="description" content="这是一个网页代码练习">

        <link rel="stylesheet" type="" href="0-css.css">
        <!-- link表示当前文档与外部资源的关系，rel表示关系，href表示外部资源路径，type表示类型。
            例如示例中stylesheet表示导入外部样式表的url，href为样式表的路径，该语句将0-css.css中的样式导入当前网页，
            可以在网页主体代码中直接使用样式表中的样式 -->
        <link rel="stylesheet" href="../css/css.css">
    </head>

    <body>
        <p>This is a exercise</p>
        <br>
        <a href="https://www.bilibili.com/">点击此处跳转b站</a>
        <br>
        <br>
        <a href="https://www.bilibili.com/" target="_blank" title="bilibili">点击此处在新窗口跳转b站</a>
        <br>
        <!-- 注意target属性在HTML5中不被支持 -->
        <br>
        <a href="https://www.bilibili.com/" target="_blank" title="bilibili">
            <img src="../img/bilibili-logo.jpg" alt="点击跳转BiliBili" width="500px" height="140px">
        </a>

        <!-- 块级元素，独占一行（相当于执行了display：block 操作），宽高可控，如果不进行设置则会沾满父级元素 ，其内部可以包含块级元素和行级元素。-->
        <div>div</div>
        <p style="width: 120px; height: 200px; background-color: rgb(255, 0, 0);">
            这是一个段落
            <q>这是一句话</q>
            <strong>这是一句着重</strong>
            <em>这是一句斜体</em>
        </p>
        <address>
            <p>Tel:</p>
            <p>Add:</p>
        </address>

        <table>
            <caption>电话簿</caption>
            <tr>
                <th>姓名</th>
                <th>电话</th>
            </tr>

            <tr>
                <td>张三</td>
                <td>123 4568</td>
            </tr>
        </table>
        <!-- 行级元素不会独占一行（相当于执行了display：inline 操作），与相邻的行级元素共占一行，直到当前行沾满后自动跳到到下一行，宽度高度均不可设置，其内只能包含行级元素 -->
        <strong>这是一个行级元素</strong>
        <span>111</span>


        <!-- 表格标签 -->
        <table class="table">
            <thead>
                <!-- 表头 -->
                <tr>
                    <!-- 行 -->
                    <th>
                        表头单元格
                    </th>
                </tr>
            </thead>

            <tbody>
                <!-- 表格体 -->
                <tr>
                    <td>
                        表格体单元格
                    </td>
                </tr>
            </tbody>
        </table>

<!--    colspan是单元格跨列合并，是单元格跨行合并 -->
        <br>
        <br>
        <table class="table">
            <tr>
                <td colspan="2">1</td>
                <!-- colspan=“2”即第一列1占用了两列合并了下一列2的位置 -->
                <!-- <td>2</td> -->
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td rowspan="2">
                            <!-- 表格可以嵌套，在一个表格的一个单元格里面可以嵌套另一个表格 -->
                    <table border="1" border-collapse:"collapse" width="100%" align="center" >
                        <tr>
                            <td>?</td>
                            <td>?</td>
                            <td>?</td>
                        </tr>
                        <tr>
                            <td>?</td>
                            <td>?</td>
                            <td>?</td>
                        </tr>
                        <tr>
                            <td>?</td>
                            <td>?</td>
                            <td>?</td>
                        </tr>
                    </table>
                </td>
                <!-- rowspan=“2”即行6横跨两行合并了了下一行9的位置 -->
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <!-- <td>9</td> -->
            </tr>
        </table>

        <br>
        <br>


        <!-- form标签包含了所有的表单元素
            action:提交的后台程序
            name：表单名称
            method：提交方式(以下四种)
                get：默认通过url传递数据，传递不安全，传递数据量小（受地址栏url限制），默认为iso-8859-1西欧编码，不能再后端直接接受中文，需要解码
                post：比较常用，数据通过请求正文传输，相对安全，数据量几乎无限，可以在后台直接通过设置编码接受中文
                del
                put -->
        <form action="http://www.baidu.com" name:"form1" method="POST">
            <table class="table-1">
                
                <tr>
                    <td colspan="2">用户注册</td>
                </tr>

                <!-- 表单里面的可输入元素 -->
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" name="username" placeholder="用户名" maxlength="20" size="20">
                    </td>

                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" name="pwd" placeholder="密码" maxlength="12" size="20"> 
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td>
                        <input type="password" name="pwd" placeholder="密码" maxlength="12" size="20">
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td>
                    <td>
                        <textarea name="myinfo" id="" cols="45" rows="5"></textarea>
                    </td>
                </tr>

                <!-- 表单里面的选择元素 -->
                <tr>
                    <td>性别(单选)</td>
                    <!-- 单选类型为radio -->
                    <td>
                        <!-- 同一组单选(radio)的input名称要一致，但是id可以不一致 checked写在默认选择的选项上面-->
                        <!-- label标签文字绑定 -->
                        <input type="radio" value="male" name="sex" id="male" checked><label for="male">Male</label>
                        <input type="radio" value="female" name="sex" id="female"><label for="female">Female</label>
                    </td>
                </tr>
                <tr>
                    <td>技能(复选)</td>
                    <!-- 复选类型为checkbox -->
                    <td>
                        <input type="checkbox" value="java" name="skill"><label for="java">java</label>
                        <input type="checkbox" value="vue" name="skill"><label for="vvue">vue</label>
                        <input type="checkbox" value="golang" name="skill"><label for="golang">golang</label>
                        <input type="checkbox" value="react" name="skill"><label for="react">teact</label>
                    </td>
                </tr>

                <tr>
                    <td>地区</td>
                    <td>
                        <select name="province" id="province"  placeholder="请选择省份">
                            <option value="北京">北京</option>
                            <option value="天津">天津</option>
                            <option value="上海">上海</option>
                            <option value="重庆">重庆</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <!-- multiple为布尔值，允许下拉框复选 -->
                        <select name="province" id="province" multiple placeholder="请选择省份">
                            <option value="北京">北京</option>
                            <option value="天津">天津</option>
                            <option value="上海">上海</option>
                            <option value="重庆">重庆</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <!-- 上传文件必须设置一个上传形式 -->
                    <td>文件</td>
                    <td>
                        <input type="file" name="photo">
                    </td>
                </tr>

                <!-- 隐藏域的内容用户看不见，但是其固定的内容会随着表单一起提交给后端 -->
                <tr>
                    <td width="200">隐藏域</td>
                    <td>
                        <input type="hidden" value="111">
                    </td>
                </tr>

                <!-- 按钮 -->
                <tr>
                    <td width="200" colspan="2">
                        <button type="submit" href="http://www.baidu.com">百度</button>
                        <button type="reset">重置</button>
                        <!-- 以下为两个自定义功能按钮，方法需要自己写在onclick里面或者在onclick里面引用方法 -->
                        <button type="button" onclick="">自定义功能按钮</button>
                        <input type="button" value="自定义功能按钮" onclick="">

                        <button type="menu">菜单</button>

                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>
